<template>
  <el-container style="height: 100%;">
    <Header />
    <el-main>
      <div class="banner">
        <img class="banner_bg" src="" alt />

        <div class="customer_banner_wrap">
          <MaskContent title="小微企业主经营贷款（抵押版）业务管理系统" content="小微企业主经营贷款（抵押版）管理系统立足于提供全面、真实，高安全性能的个人住房抵押贷款功能，以期基本实现经营抵押贷款环节的流程。在基本的贷款业务功能上还预留了众多功能性API接口，如证件OCR、人脸识别、规则引擎、指纹签名、押品评估等。自定义工作流、产品要素、业务参数等，多种计息及还款方式为客户提供个性化服务。"/>
        </div>
      </div>

      <system-introduce :systemData="systemData" :introduceImg="introduceImg" />

      <div class="system-overview_wrapper">
        <custom-caption class="customer_caption" title="系统截图" content="" />
        <system-overview-swipper class="isPC" :swiperList="swiperList" />

        <system-overview class="isMobile" :systemImgData="systemImgData" />
      </div>

      <Footer/>
    </el-main>
  </el-container>
</template>

<script>
import Header from "../../components/header/Header";
import MaskContent from "../../components/MaskContent";
import CustomCaption from "../../components/CustomCaption";
import SystemIntroduce from "./components/systemIntroduce";
import SystemOverview from "./components/systemOverview";
import SystemOverviewSwipper from "./components/systemOverviewSwipper";
import Footer from "../../components/footer/Footer";
export default {
  name: "operatingLoan",
  components: {
    Header,
    MaskContent,
    CustomCaption,
    SystemIntroduce,
    SystemOverview,
    SystemOverviewSwipper,
    Footer
  },
  data() {
    return {
      systemData: [
        {
          functionsName: "子系统案例1:进件审批系统",
          functionsDes: [
            "爱房APP集合了房抵贷业务流程中所需的进件信息录入、申请材料上传、授信审批、合同合成、放款审核、押品管理等主要功能，操作便捷，流程自动化。"
          ]
        },
        {
          functionsName: "子系统案例2:信贷数据分析系统",
          functionsDes: [
            "信贷数据分析平台集合了房抵贷业务流程中所需的视频面签、进件案件跟踪、业务发展、还款分析、贷款规模统计报表，全面的对实际业务中所涉及的信贷数据实时统计分析。"
          ]
        },
        {
          functionsName: "子系统案例3:管理中后台系统",
          functionsDes: [
            "通过中后台系统进行黑名单验证查询、进件状态查询、房产信息查询、放款终审等日常运营工作：",
            "1、及时处理客户问题，99%的问题当天能处理完成或给出处理方案;",
            "2、确保产品正常发布，在资产充足的情况下，客户随时可购买不同期限、不同收益的理财产品;",
            "3、确保客户落账能及时核实，给予客户预计处理时间，并保障业务账务准确;",
            "4、根据还款情况，提前与集团财务沟通资金安排，确保及时完成兑付;",
            "5、每日统计业务开展情况，形成日报，进行日常监控。"
          ]
        }
      ],
      introduceImg: require("../../assets/image/operatingLoan/case_iphone.png"),
      systemImgData: [
        {
          imgUrl: require("../../assets/image/operatingLoan/业务管理系统3.png")
        },
        {
          imgUrl: require("../../assets/image/operatingLoan/业务管理系统4.png")
        },
        {
          imgUrl: require("../../assets/image/operatingLoan/信贷数据分析系统1.png")
        },
        {
          imgUrl: require("../../assets/image/operatingLoan/信贷数据分析系统2.png")
        },
        {
          imgUrl: require("../../assets/image/operatingLoan/进件审批系统1.jpg")
        },
        {
          imgUrl: require("../../assets/image/operatingLoan/进件审批系统2.jpg")
        },
        {
          imgUrl: require("../../assets/image/operatingLoan/进件审批系统3.jpg")
        },
        {
          imgUrl: require("../../assets/image/operatingLoan/进件审批系统7.png")
        }
      ],
      swiperList: [
        {
          id: "01",
          imgWrapper: [
            {
              imgUrl: require("../../assets/image/operatingLoan/信贷数据分析系统1.png")
            },
            {
              imgUrl: require("../../assets/image/operatingLoan/信贷数据分析系统2.png")
            },
            {
              imgUrl: require("../../assets/image/operatingLoan/业务管理系统3.png")
            },
            {
              imgUrl: require("../../assets/image/operatingLoan/业务管理系统4.png")
            }
          ]
        },
        {
          imgWrapper: [
            {
              imgUrl: require("../../assets/image/operatingLoan/进件审批系统1.jpg")
            },
            {
              imgUrl: require("../../assets/image/operatingLoan/进件审批系统2.jpg")
            },
            {
              imgUrl: require("../../assets/image/operatingLoan/进件审批系统3.jpg")
            },
            {
              imgUrl: require("../../assets/image/operatingLoan/进件审批系统7.png")
            }
          ]
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
.el-main {
  padding: 0 !important;
  margin: 0 !important;
}

.banner {
  position: relative;

  .banner_bg {
    content: url("../../assets/image/operatingLoan/banner.png") !important;
    width: 100%;
  }
  .customer_banner_wrap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.system-overview_wrapper {
  background-color: $gray_bgc;

  .customer_caption {
    text-align: center;
    padding-top: 40px;
  }
}

.isPC {
  display: block;
}
.isMobile {
  display: none;
}

/**
移动端样式
 */
@media screen and (max-width: $mobile_width) {
  .banner_bg {
    content: url("../../assets/image/operatingLoan/banner_m.jpg") !important;
    min-height: 200px;
  }

  .isPC {
    display: none;
  }
  .isMobile {
    display: block;
  }
}
</style>
